<template>
  <div class="contents">
    <div class="pagetab">
      <div class="item" @click="gopage(0)">数据处理</div>
      <div class="item" @click="gopage(1)">模型分析</div>
      <div class="item"  @click="gopage(2)">业务应用</div>
      <div style="width: 1100px;"></div>
      <router-link to='/index'>
        <div class="item2">待开发</div>
      </router-link>
    </div>
    <div class="contetn_left">
      <dv-border-box-13>
        <div class="layer-content">
          <my-map_left :changepage="chagepage"/>
        </div>
      </dv-border-box-13>
    </div>
    <div class="contetn_center">
      <dv-border-box-13>
        <div class="map">
          <my-map_center :changepage="chagepage"/>
        </div>
      </dv-border-box-13>

    </div>
    <div class="contetn_right">
      <dv-border-box-13>
        <div class="method-content">
          <my-map_right :changepage="chagepage"/>
        </div>
      </dv-border-box-13>
    </div>
   <!-- <div class="map_content">
      <dv-border-box-13>
        <div class="map">
          <my-map :changepage="chagepage"/>
        </div>
      </dv-border-box-13>
    </div>-->

  </div>
</template>

<script>
import MyMap from './myMap'
import MyMap_left from './myMap_left'
import MyMap_center from './myMap_center'
import MyMap_right from './myMap_right'

export default {
  components: {
    MyMap,
    MyMap_left,
    MyMap_center,
    MyMap_right

  },
  data() {
    return {
      chagepage:{'sta':true,'btnum':99},
      clicknum:2,

    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
  },

  mounted() {},
  methods: {
    gopage(e){
      var arr={}
      if(e===this.chagepage.btnum){
        this.clicknum=this.clicknum+1
        if(this.clicknum>2&&this.clicknum%2){
          arr.sta=true
          arr.btnum=e
          this.chagepage=arr
        }else{
          arr.sta=false
          arr.btnum=e
          this.chagepage=arr
        }

      }else{

        arr.sta=false
        arr.btnum=e
        this.chagepage=arr
        this.clicknum=2
      }


    }
  },
};
</script>
<style lang="scss" scoped>
// 内容
.contents {
  .contetn_left{
    width: 15%;
    .border-box-content{
      display: flex;
      align-content: center;
      justify-content: center;
      align-items: center;
    }
    .layer-content{
      display: flex;
      align-content: center;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
  }

  .contetn_right {
    width: 20%;
    .border-box-content{
      display: flex;
      align-content: center;
      justify-content: center;
      align-items: center;
    }
    .method-content{
      display: flex;
      align-content: center;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
  }

  .contetn_center {
    width: 65%;
    .border-box-content{
      display: flex;
      align-content: center;
      justify-content: center;
      align-items: center;
    }
    .map{
      display: flex;
      align-content: center;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
  }

/*  //左右两侧 三个块
  .contetn_lr-item {
    height: 310px;
  }

  .contetn_center_top {
    width: 100%;
  }

  // 中间
  .contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .contetn_center-bottom {
    height: 315px;
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;


  }*/
}


@keyframes rotating {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
    50% {
        -webkit-transform: rotate(180deg) scale(1.1);
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
</style>
